<html>
	<head>
		<meta charset="utf-8"/>
        <title>Biểu đồ phát triển</title>
		<script type="text/javascript" src="js/Chart.js"></script>
    </head>
    <body>
		<?php 
			$matre = $_REQUEST['matre'];
			require('connect.php');
			$result = $mysqli->query("select HOTEN_TRE from TRE where MA_TRE = '{$_REQUEST['matre']}'");
			$row = $result->fetch_array();
			echo "Biểu đồ phát triển của trẻ {$row[0]} trong năm ".date('Y');
		?>
        <div>
			<canvas id="canvas" height="450px" width="600px"></canvas>
            <hr style="border:1px solid rgb(0,125,255); width:50px; display:inline-block" /> Chiều cao (cm)<br>
            <hr style="border:1px solid rgb(255,125,0); width:50px; display:inline-block" /> Cân nặng (kg)
		</div>
		<script>
		var lineChartData = {
			labels : ["T1","T2","T3","T4","T5","T6","T7","T8","T9","T10","T11","T12",],
			datasets : [
				{
					label: "Chiều cao",
					fillColor : "rgba(0,0,0,0)",
					strokeColor : "rgba(0,125,255,1)",
					pointColor : "rgba(0,0,255,1)",
					pointStrokeColor : "#fff",
					pointHighlightFill : "#fff",
					pointHighlightStroke : "rgba(220,220,220,1)",
					data : [<?php
					$result = $mysqli->query("select * from tinhhinhchung where MA_TRE = '{$matre}' order by THANG");
					while($row=$result->fetch_array()) echo $row['CHIEUCAO'].","; ?>]
				},
				{
					label: "Cân nặng",
					fillColor : "rgba(0,0,0,0)",
					strokeColor : "rgba(255,125,0,1)",
					pointColor : "rgba(255,125,0,1)",
					pointStrokeColor : "#fff",
					pointHighlightFill : "#fff",
					pointHighlightStroke : "rgba(151,187,205,1)",
					data : [<?php
					$result = $mysqli->query("select * from tinhhinhchung where MA_TRE = '{$matre}' order by THANG");
					while($row=$result->fetch_array()) echo $row['CANNANG'].","; ?>]
				}
			]

		}

	window.onload = function(){
		var ctx = document.getElementById("canvas").getContext("2d");
		window.myLine = new Chart(ctx).Line(lineChartData, {
			responsive: true
		});
	}
	</script>
    </body>
</html>